<!-- 正文开始 -->
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-body">
      <!-- 表格工具栏 -->
      <form class="layui-form toolbar" lay-filter="payRecordTbSearchForm">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">姓&emsp;名:</label>
            <div class="layui-input-inline">
              <input name="payUserName" class="layui-input search_key" placeholder="输入账号"/>
            </div>
          </div>
          <div class="layui-inline">&emsp;
            <button class="layui-btn icon-btn" lay-filter="payRecordTbSearch"
              id="payRecordTbSearch" lay-submit>
              <i class="layui-icon">&#xe615;</i>搜索
            </button>
          </div>
        </div>
      </form>
      <!-- 数据表格 -->
      <table id="payRecordTable" lay-filter="payRecordTable"></table>
    </div>
  </div>
</div>
<!-- 表格操作列 -->
<script type="text/html" id="payRecordTbBar">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs"
    data-dropdown="#payRecordTbDelDrop{{d.LAY_INDEX}}" no-shade="true">删除</a>
  <div class="dropdown-menu-nav dropdown-popconfirm dropdown-top-right layui-hide"
    id="payRecordTbDelDrop{{d.LAY_INDEX}}"
    style="max-width: 200px;white-space: normal;min-width: auto;margin-left: 10px;">
    <div class="dropdown-anchor"></div>
    <div class="dropdown-popconfirm-title">
      <i class="layui-icon layui-icon-help"></i>
      确定要删除{{d.payUserName}}吗？
    </div>
    <div class="dropdown-popconfirm-btn">
        <a class="layui-btn" btn-cancel>取消</a>
        <a class="layui-btn layui-btn-normal" lay-event="del">确定</a>
    </div>
  </div>
</script>
<!-- 表单弹窗 -->
<script type="text/html" id="payRecordEditDialog">
<form id="payRecordEditForm" lay-filter="payRecordEditForm" class="layui-form model-form">
  <input name="id" id="id" type="hidden"/>
  <input name="organizationId" type="hidden"/>
  <div class="layui-form-item layui-row">
    <div class="layui-col-md4">
      <label class="layui-form-label layui-form-required">费用名</label>
      <div class="layui-input-block">
        <input id="feeName" name="feeName" type="text" class="layui-input" autocomplete="off"
               lay-verType="tips" lay-verify="" placeholder=""/>
      </div>
    </div>
  </div>
  <div class="layui-form-item layui-row">
    <div class="layui-col-md4">
      <label class="layui-form-label layui-form-required">用户id</label>
      <div class="layui-input-block">
        <input id="payUserId" name="payUserId" type="text" class="layui-input" autocomplete="off"
               lay-verType="tips" lay-verify="" placeholder="请输入用户id"/>
      </div>
    </div>
    <div class="layui-col-md4">
      <label class="layui-form-label layui-form-required">类型</label>
      <div class="layui-input-block">
        <input id="type" name="type" type="text" class="layui-input" autocomplete="off"
               lay-verType="tips" lay-verify="" placeholder="请输入类型: 缴费,提成"/>
      </div>
    </div>
    <div class="layui-col-md4">
      <label class="layui-form-label layui-form-required">金额</label>
      <div class="layui-input-block">
        <input id="price" name="price" type="text" class="layui-input" autocomplete="off"
               lay-verType="tips" lay-verify="" placeholder="请输入金额"/>
      </div>
    </div>
  </div>
  <div class="layui-form-item layui-row">
    <div class="layui-col-md4">
      <label class="layui-form-label layui-form-required">操作人</label>
      <div class="layui-input-block">
       <input id="operateUserId" name="operateUserId" type="text" class="layui-input" autocomplete="off"
       lay-verType="tips" lay-verify="numberX" placeholder="请输入操作人"/>
      </div>
    </div>
    <div class="layui-col-md4">
      <label class="layui-form-label layui-form-required">备注</label>
      <div class="layui-input-block">
       <input id="remark" name="remark" type="text" class="layui-input" autocomplete="off"
       lay-verType="tips" lay-verify="" placeholder="请输入备注"/>
      </div>
    </div>
    <div class="layui-col-md4">
      <label class="layui-form-label layui-form-required">排序</label>
      <div class="layui-input-block">
       <input id="orderNum" name="orderNum" type="text" class="layui-input" autocomplete="off"
       lay-verType="tips" lay-verify="numberX" placeholder="请输入排序"/>
      </div>
    </div>
  </div>
  <div class="layui-form-item text-right">
    <button class="layui-btn" lay-filter="payRecordEditSubmit" lay-submit>保存</button>
    <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
  </div>
</form>
</script>
<!-- js部分 -->
<script>
layui.use(['layer', 'form', 'table', 'tableX', 'util', 'admin', 'xmSelect', 'formX', 'dropdown', 'upload', 'laydate'], function () {
  let $ = layui.jquery;
  let layer = layui.layer;
  let form = layui.form;
  let table = layui.table;
  let tableX = layui.tableX;
  let util = layui.util;
  let admin = layui.admin;
  let formX = layui.formX;
  let setter = layui.setter;
  let xmSelect = layui.xmSelect;
  let laydate = layui.laydate;
  form.render('select', 'payRecordTbSearchForm');

  /* 渲染表格 */
  let insTb = tableX.render({
    elem: '#payRecordTable',
    url: setter.baseServer + '/appo/payRecord/page',
    page: true,
    height: 'full-235',
    limits: [10,20,30,50,80,100,200],
    limit: 20 ,//每页默认显示的数量
    /*toolbar: ['<p>',
      '<button lay-event="add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>&nbsp;',
      '<button lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon">&#xe640;</i>删除</button>&nbsp;',
      '</p>'].join(''),*/
    cellMinWidth: 100,
    cols: [[
      // {type: 'checkbox'},
      {type: 'numbers'},
      {field: "payUserName",  title: "姓名", sort: true, hide:false },
      {field: "feeName",  title: "费用名", sort: true, hide:false },
      {field: "type",  title: "类型", sort: true, hide:false },
      {field: "price",  title: "金额", sort: true, hide:false },
      {field: "operateUserName",  title: "操作人", sort: true, hide:false },
      {field: "remark",  title: "备注", sort: true, hide:false },
      // {field: "orderNum",  title: "排序", sort: true, hide:true },
      {field: "createTime",  title: "创建时间", sort: true, hide:false ,templet: function (d) {
            return util.toDateString(d.createTime);
          }
      },
      {field: "createName",  title: "创建人", sort: true, hide:false },
      // {field: "updateTime",  title: "更新时间", sort: true, hide:true ,templet: function (d) {
      //       return util.toDateString(d.updateTime);
      //     }
      // },
      // {field: "updateUser",  title: "更新人", sort: true, hide:true },
      // {title: '操作', toolbar: '#payRecordTbBar', align: 'center', minWidth: 200, fixed: 'right'}
    ]]
  });

  //监听行双击
  // table.on('rowDouble(payRecordTable)', function(obj){
  //   let data = obj.data;
  //   showEditModel(data);
  //   // obj.tr.find("a[lay-event=edit]").trigger("click");//会跳出来两个一样的框 这个不好用
  //   //obj.tr.toggleClass('layui-table-click').siblings().removeClass('layui-table-click');//选中行
  // });

  $('.search_key').bind('keypress',function(event){
    if(event.keyCode == "13")
    {
      $("#payRecordTbSearch").click();
    }
  });

  /* 表格搜索 */
  form.on('submit(payRecordTbSearch)', function (data) {
    insTb.reload({where: data.field, page: {curr: 1}});
    return false;
  });

  /* 表格工具条点击事件 */
  table.on('tool(payRecordTable)', function (obj) {
    if ('edit' === obj.event) { // 修改
      showEditModel(obj.data);
    } else if ('del' === obj.event) { // 删除

      doDel(obj);
    }
  });

  /* 表格头工具栏点击事件 */
  table.on('toolbar(payRecordTable)', function (obj) {
    if ('add' === obj.event) { // 添加
      showEditModel();
    } else if ('del' === obj.event) { // 删除
      let checkRows = table.checkStatus('payRecordTable');
      if (!checkRows || !checkRows.data || 0 === checkRows.data.length) {
        return layer.msg('请选择要删除的数据', {icon: 2, anim: 6});
      }
      let ids = ''
      checkRows.data.map(function (d) {
        ids = ids + d.id + ','
      });
      if(ids) {
        ids = ids.substr(0,ids.length -1)
      }
      doDel({ids: ids});
    }
  });

  /* 显示表单弹窗 */
  function showEditModel(mData) {
    admin.open({
      type: 1,
      title: (mData ? '修改' : '添加') + '交费记录',
      maxmin:true,
      closeBtn:1,
      resize: true,
      shade: [0.8, "#393D49"],
      shadeClose:true,
      area:["900px","500px"],
      content: $('#payRecordEditDialog').html(),
      success: function (layero, dIndex) {
        // 回显表单数据
        form.val('payRecordEditForm', mData);
        // 表单提交事件
        form.on('submit(payRecordEditSubmit)', function (data) {
          let loadIndex = layer.load(2);
          admin.req('/appo/payRecord', data.field, function (res) {
            layer.close(loadIndex);
            if (0 === res.code) {
              layer.close(dIndex);
              layer.msg(res.msg, {icon: 1});
              insTb.reload({page: {curr: 1}});
            } else {
              layer.msg(res.msg, {icon: 2, anim: 6});
            }
          }, mData ? 'put' : 'post');
          $("button[lay-filter='payRecordEditSubmit']").attr("disabled","disabled");
          setTimeout(function(){$("button[lay-filter='payRecordEditSubmit']").removeAttr("disabled");}, 1000 )
          return false;
        });
        // 禁止弹窗出现滚动条
        $(layero).children('.layui-layer-content').css('overflow', 'visible');
      }
    });
  }

  /* 删除 */
  function doDel(obj) {
    console.log(obj)
    if (obj.ids) {
      admin.confirm('确定要删除选中数据吗？', function (i) {
        layer.close(i);
        let loadIndex = layer.load(2);
        admin.req('/appo/payRecord/remove', {id: obj.ids}, function (res) {
          layer.close(loadIndex);
          if (0 === res.code) {
            layer.msg(res.msg, {icon: 1});
            insTb.reload({page: {curr: 1}});
          } else {
            layer.msg(res.msg, {icon: 2, anim: 6});
          }
        }, 'delete');
      });
    } else {
      let loadIndex = layer.load(2);
      admin.req('/appo/payRecord/remove', {id: obj.data.id}, function (res) {
        layer.close(loadIndex);
        if (0 === res.code) {
          layer.msg(res.msg, {icon: 1});
          insTb.reload({page: {curr: 1}});
        } else {
          layer.msg(res.msg, {icon: 2, anim: 6});
        }
      }, 'delete');
    }
  }
});
</script>
